<template>
	<el-container :direction="containerMode">
		<el-aside :style="asideStyle">
			<div class="menu-title">
				<i class="el-icon-s-cooperation">我的工具箱</i>
			</div>
			<div class="menu-body">
				<el-menu 
				ref="elMenuMain" 
				:default-active="menu.addr" 
				unique-opened 
				router 
				class="el-menu-main" 
				@select="handleSelect" 
				text-color="#eee" 
				background-color="#2b3a4a" 
				active-text-color="#409eff" 
				:mode="menuMode">
					<el-submenu index="1">
						<template slot="title"><i class="el-icon-mobile-phone"></i>计算器</template>
						<el-menu-item index="/">贷款计算器</el-menu-item>
						<el-menu-item index="/Invest">利息计算器</el-menu-item>
						<el-menu-item index="/stockCost">成本计算器</el-menu-item>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title"><i class="el-icon-folder-add"></i>生成器</template>
						<el-menu-item index="/Random">随机生成器</el-menu-item>
						<el-menu-item index="/RandomImg">图片生成器</el-menu-item>
						<el-menu-item index="/Encryption">密钥生成器</el-menu-item>
						<el-menu-item index="/Fun">笑话生成器</el-menu-item>
					</el-submenu>
					<el-submenu index="3">
						<template slot="title"><i class="el-icon-menu"></i>其他</template>
						<el-menu-item index="/Stock">股票查询</el-menu-item>
						<el-menu-item index="/Music">音乐盒</el-menu-item>
						<el-menu-item index="/Mathematics">数学</el-menu-item>
						<el-menu-item index="/ChangeCode">编码转换</el-menu-item>
						<el-menu-item index="/TextTool">文本工具</el-menu-item>
						<!-- <el-menu-item index="/Test">测试页</el-menu-item> -->
					</el-submenu>
				</el-menu>
			</div>
		</el-aside>
		<el-container>
			<el-header>{{menu.title}}</el-header>
			<el-main>
				<router-view />
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		inject: ['reload'], //使用provide/inject向父对象拿值
		data() {
			return {
				menuMode: 'vertical',
				windowWidth: 0,
				menu: {
					title: '贷款计算器',
					index: '1',
					addr: '/'
				},
				containerMode: 'horizontal',
				asideStyle: 'width: 17%',
			}
		},
		methods: {
			handleSelect(key, keyPath) {
				if (key == '/') {
					this.menu.title = "贷款计算器";
					this.menu.index = 1;
				} else if (key == '/Invest') {
					this.menu.title = "利息计算器";
					this.menu.index = 1;
				}  else if (key == '/stockCost') {
					this.menu.title = "成本计算器";
					this.menu.index = 1;
				} else if (key == '/Random') {
					this.menu.title = "随机生成器";
					this.menu.index = 2;
				} else if (key == '/RandomImg') {
					this.menu.title = "图片生成器";
					this.menu.index = 2;
				} else if (key == '/Encryption') {
					this.menu.title = "密钥生成器";
					this.menu.index = 2;
				} else if (key == '/Fun') {
					this.menu.title = "笑话生成器";
					this.menu.index = 2;
				} else if (key == '/Stock') {
					this.menu.title = "股票查询";
					this.menu.index = 3;
				} else if (key == '/Music') {
					this.menu.title = "音乐盒";
					this.menu.index = 3;
				} else if (key == '/Mathematics') {
					this.menu.title = "数学";
					this.menu.index = 3;
				} else if (key == '/ChangeCode') {
					this.menu.title = "编码转换";
					this.menu.index = 3;
				} else if (key == '/TextTool') {
					this.menu.title = "文本工具";
					this.menu.index = 3;
				} else if (key == '/Test') {
					this.menu.title = "测试页";
					this.menu.index = 3;
				}
				this.menu.addr = key;

				this.$store.commit("setMenu", this.menu);
			},
			handleReload() {
				if (this.windowWidth <= 767 && window.innerWidth > 767 || this.windowWidth > 767 && window.innerWidth <= 767) {
					this.reload();
				}
			},
		},
		created() {
			this.windowWidth = window.innerWidth;
			if (window.innerWidth <= 767) {
				this.menuMode = 'horizontal';
				this.containerMode = 'vertical';
				this.asideStyle = 'width: 100%';
			}
			if (window.innerWidth > 767) {
				this.menuMode = 'vertical';
				this.containerMode = 'horizontal';
				this.asideStyle = 'width: 17%';
			}
			//获取历史记录的页面信息（暂时弃用）
			this.menu = this.$store.getters.getMenu;
		},
		mounted() {
			//跳转到历史记录的页面
			// if(this.$route.path!=this.menu.addr){
			// 	this.$router.replace({path:this.menu.addr});
			// }
			//根据进入的路径设置菜单栏
			this.handleSelect(this.$route.path, "");
			
			window.addEventListener("resize", this.handleReload);
			if (window.innerWidth > 767) {
				this.$refs.elMenuMain.open(this.menu.index);
			}
		},
		destroyed() {
			// 在组件生命周期结束的时候销毁。
			window.removeEventListener("resize", this.handleReload);
		},
	}
</script>

<style scoped>
	.el-container {
		height: 100%;
		background-color: #f4f4f4;
	}
	.el-aside {
		background: #2b3a4a;
	}
	.el-aside::-webkit-scrollbar,
	.el-main::-webkit-scrollbar {
		display: none;
	}

	.menu-title {
		color: #eee;
	}
	.menu-body {
		text-align: left;
	}
	.menu-body .el-menu {
		border-right: unset;
	}
	.menu-body .el-menu .el-submenu .el-menu-item {
		min-width: unset;
	}
	
	@media screen and (min-width: 1200px){
		.menu-title{
			height: 80px;
			line-height: 80px;
			font-size: 30px;
		}
		.el-menu-main .el-menu-item, .el-menu-main >>> .el-submenu__title{
			font-size: 20px;
		}
		
		.el-header {
			height: 80px!important;
			line-height: 80px;
			font-size: 32px;
			font-weight: bold;
			border-bottom: 1px solid #000;
		}
		.el-main {
			padding: 10px 40px 0 40px;
			font-size: 20px;
		}
	}
	@media screen and (max-width: 1200px){
		.menu-title{
			height: 60px;
			line-height: 60px;
			font-size: 20px;
		}
		.el-menu-main >>> .el-submenu__title{
			font-size: 15px;
			padding: 0 12px 0 12px!important;
			height: 40px;
			line-height: 40px;
		}
		.menu-body .el-menu .el-submenu .el-menu-item{
			font-size: 15px;
			padding: 0 30px 0 30px!important;
			height: 40px;
			line-height: 40px;
		}
		
		.el-header {
			height: 60px;
			line-height: 60px;
			font-size: 28px;
			font-weight: bold;
			border-bottom: 1px solid #000;
		}
		.el-main {
			padding: 10px 30px 0 40px;
			font-size: 20px;
		}
	}
	@media screen and (max-width: 767px){
		.menu-title{
			font-size: 20px;
			height: 40px!important;
			line-height: 40px!important;
		}
		.el-menu-main .el-menu-item, .el-menu-main >>> .el-submenu__title{
			height: 40px!important;
			line-height: 40px!important;
			padding: 0 10px 0 8px!important;
		}
		
		.el-header {
			display: none;
			font-size: 0;
		}
		.el-main {
			padding: 10px 0px 0 10px;
			font-size: 17px;
		}
	}
</style>
